/**
 * Created by Administrator on 2018/4/16 0016.
 */
import config from '../../../../../config/config.js'

// components
import TimeSpinner from '../../base/time-spinner.vue'
import Confirm from '../../base/confirm.vue'
import Options from '../../time-mixins.js'
// mixins
import Mixin from '../panel-mixin.js'
import Locale from '../../../../../mixins/locale.js'
// tools
import { initTimeDate } from '../../util'
// prefix
const prefixCls = config.prefix + '-picker-panel'
const timePrefixCls = config.prefix + '-time-picker'
// module
export default {
  name: 'TimePickerPanel',
  mixins: [Mixin, Locale, Options],
  components: { TimeSpinner, Confirm },
  props: {
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    value: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      timePrefixCls: timePrefixCls,
      date: this.value[0] || initTimeDate(),
      showDate: false
    }
  },
  computed: {
    showSeconds () {
      return !(this.format || '').match(/mm$/)
    },
    visibleDate () {
      const date = this.date
      const month = date.getMonth() + 1
      const tYear = this.t('i.datepicker.year')
      const tMonth = this.t(`i.datepicker.month${month}`)
      return `${date.getFullYear()}${tYear} ${tMonth}`
    }
  },
  watch: {
    value (dates) {
      let newVal = dates[0] || initTimeDate()
      newVal = new Date(newVal)
      this.date = newVal
    }
  },
  methods: {
    handleChange (date, emit = true) {
      const newDate = new Date(this.date)
      Object.keys(date).forEach(
        type => newDate[`set${Artery.firstUpperCase(type)}`](date[type])
      )
      if (emit) {
        this.$emit('on-pick', newDate, true)
      }
    }
  },
  mounted () {
    if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true
  }
}
